<template>
  <div>
    <p
      style="
        padding: 10px;
        border-bottom: 1px solid #f2f2f2;
        font-size: 18px;
        display: flex;
        justify-content: space-between;
      "
    >
      <span>商品分类</span>
      <el-button type="success" @click="dialogVisible = true"
        >添加分类</el-button
      >
    </p>

    <el-table :data="goodsData">
      <el-table-column
        label="序号"
        type="index"
        width="100px"
      ></el-table-column>

      <el-table-column label="分类名称">
        <template slot-scope="scope">
          <label v-show="!scope.row.isedit">{{ scope.row.cateName }}</label>
          <el-input
            v-show="scope.row.isedit"
            v-model="scope.row.cateName"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column label="是否启用">
        <template scope="scope">
          <el-switch
            :disabled="!scope.row.isedit"
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#F56C6C"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            :style="
              scope.row.isedit
                ? 'background:#99CC33;color:#fff'
                : 'background:#FFCC00;color:#fff'
            "
            size="mini"
            @click="editBtn(scope.row)"
            >{{ scope.row.isedit ? "完成" : "编辑" }}</el-button
          >
          <el-button type="danger" size="mini" @click="delBtn(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        :page-size="pageSize"
        layout="total,  prev, pager, next, jumper"
        :total="total"
        @current-change="curchange"
      >
      </el-pagination>
    </div>

    <!-- 添加分类弹框 -->
    <el-dialog title="添加分类" :visible.sync="dialogVisible" width="40%">
      <p>
        分类名称:<el-input
          v-model="goodsNam"
          style="width: 350px; margin-left: 10px"
        ></el-input>
      </p>
      <p style="margin-top: 30px">
        是否启用:
        <el-switch
          v-model="switchVal"
          active-color="#13ce66"
          inactive-color="#F56C6C"
          :active-value="true"
          :inactive-value="false"
        >
        </el-switch>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="success"
          @click="dialogVisible = false"
          @click.native="sureBtn"
        >
          确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { goodsaddcate, catelist, delcate, editcate } from "@/apis/goods";
export default {
  data() {
    return {
      goodsData: [], //数据
      dialogVisible: false, //弹框确定&取消
      goodsNam: "", //弹框商品名
      switchVal: false, //弹窗启用按钮
      // swithback:false, //上传启用按钮状态
      total: 0, //总条数
      currentPage: 1, //当前页
      pageSize: 5, //每页条数
    };
  },

  methods: {
    //获取列表函数
    getcatelist() {
      if (this.isclickpages) {
        this.$message({
          message: "系统提示：操作过于频繁,稍后再试噢 （⊙ｏ⊙）",
          type: "warning",
        });
        return;
      }
      this.isclickpages = true;

      setTimeout(() => {
        this.isclickpages = false;
      }, 500);

      catelist({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        // console.log(res.data.data);
        this.total = res.data.total;
        for (const obj of res.data.data) {
          obj.state = Boolean(obj.state);
          obj.isedit = false;
        }

        this.goodsData = res.data.data;
      });
    },
    //点击弹框确定
    sureBtn() {
      goodsaddcate({
        cateName: this.goodsNam,
        state: this.switchVal,
      }).then((res) => {
        // console.log(res.data);
        if (res.data.code == 0) {
          this.goodsNam = "";
          this.$message({
            message: "系统提示：添加分类成功(≧∇≦)ﾉ",
            type: "success",
          });
        }
      });
    },
    //分页
    curchange(page) {
      this.currentPage = page;
      this.getcatelist();
    },
    //点击删除
    delBtn(id) {
      this.$confirm(
        "此操作会永久删除该数据哦~, 是否继续?(。>︿<)_θ",
        "系统提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass:'closeBtn',
          confirmButtonClass:'sureBtn',
          type: "warning",
        }
      )
        .then(() => {
          delcate({ id: id }).then((res) => {
            // console.log(res);
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "系统提示：删除成功§(*￣▽￣*)§",
              });
            }
            this.getcatelist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "系统提示：已取消删除(/▽＼)",
          });
        });
    },
    //点击编辑
    editBtn(item) {
      // console.log(item);
      if (item.isedit) {
        editcate({
          id: item.id,
          cateName: item.cateName,
          state: item.state,
        }).then((res) => {
          // console.log(res.data);
          if (res.data.code == 0) {
            this.$message({
              type: "success",
              message: "系统提示：修改成功§(*￣▽￣*)§",
            });
          }
        });
      }
      item.isedit = !item.isedit;
    },
  },
  created() {
    this.getcatelist();
    //    console.log(this.menusstate);

     this.$bus.emit('subTitle','商品管理>','商品分类>')

  },
};
</script>

<style lang="less" scoped>
</style>